<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta charset="utf-8" name="viewport"
   content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<html>

<head>
   <base href="/">
   <title>用户登陆/注册</title>

   <link rel="icon" href="/static/etc/img/favicon.ico" type="image/x-icon"/>
   <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link rel="stylesheet" href="/static/etc/css/base/color.css" />

   <script type="text/javascript" src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
   <script type="text/javascript" src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
   <script type="text/javascript" src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
   <script type="text/javascript" src="https://unpkg.com/md5@2.3.0/dist/md5.min.js"></script>
   <script type="text/javascript" src="/static/etc/js/const/dic-base.js"></script>
   <script type="text/javascript" src="/static/etc/js/base/base.js"></script>
   <script type="text/javascript" src="/static/etc/js/base/common-utils.js"></script>
   <script type="text/javascript" src="/static/etc/frame/layer/layer.js"></script>
   <style type="text/css">
      /*对话框*/
      .el-dialog__body {
         background-color: #303539;
      }

      .el-input-group__prepend {
         background-color: #23272e;
         border: unset;
      }

      /*标签页-选中标签*/
      .el-tabs__item.is-active {
         color: var(--div-background);
      }

      .el-tabs__item {
         color: #f5f5f5;
         font-size: larger;
      }

      .el-button {
         font-size: larger;
         width: inherit;
      }

      .el-input-group__append>.el-button {
         width: unset;
      }

      .el-input-group__append button.el-button {
         background-color: var(--i-orange);
         border: 0;
         color: white;
      }

      .el-input-group__append button.el-button.is-disabled {
         background-color: unset;
         border: 0;
         color: #C0C4CC;
      }

      .el-button--primary,
      .el-tabs__active-bar {
         background-color: var(--i-orange);
         border-color: var(--i-orange);
      }

      .login-logo {
         background: url('/etc/img/logo.png') top center no-repeat;
         width: 100%;
         height: 22px;
         float: left;
         margin-bottom: 56px;
      }

      #pane-register>div>form>div:nth-child(4)>div>div>div.el-input-group__append,
      #pane-login>div>form>div:nth-child(3)>div>div>div.el-input-group__append {
         padding: 0;
      }

      message-box__input input.invalid:focus {
         background: #fee;
      }

      .el-input-group__prepend {
         padding: 0 10px;
      }

      /*错误提示*/
      .el-form-item__error {
         margin-left: 60px;
      }

      .el-form-item.is-error .el-input__inner {
         background: antiquewhite;
      }

      .el-autocomplete {
         width: 100%;
      }

      .opacity {
         opacity: 0
      }
   </style>

</head>

<body style="overflow-y:scroll; height: 100%; background:#3c4349">

   <div id="accountModal">
      <el-row justify="center" :gutter="20">
         <!-- 添加一个透明DIV，用来填充内容，使得居中生效 -->
         <el-col :xs="2" :sm="4" :md="6" :lg="5" :xl="8">
            <div class="opacity">-</div>
         </el-col>
         <el-col :xs="20" :sm="16" :md="12" :lg="10" :xl="8">
            <template>
               <div style="margin: 20px auto;text-align: center;">
                  <img src="/static/etc/img/logo.png" alt="">
               </div>
               <el-tabs v-model="activeName" stretch>
                  <el-tab-pane label="账号登陆" name="login">
                     <div style="background-color: #262c38; padding: 20px">
                        <el-form label-width="0" :model="loginForm" :rules="loginFormRules" ref="loginForm">
                           <el-form-item prop="username">
                              <el-input placeholder="请输入用户名或邮箱账户" v-model="loginForm.username" maxlength="13">
                                 <template slot="prepend">
                                    <div class="fa fa-fw fa-2x fa-user-o"></div>
                                 </template>
                              </el-input>
                           </el-form-item>
                           <el-form-item prop="password">
                              <el-input placeholder="请输入密码" v-model="loginForm.password" type="password" maxlength="20"
                                 show-password>
                                 <template slot="prepend">
                                    <div class="fa fa-fw fa-2x fa-lock"></div>
                                 </template>
                              </el-input>
                           </el-form-item>
                           <el-form-item prop="captcha" v-if="needLoginCaptcha">
                              <el-input placeholder="请输入图片验证码" v-model="loginForm.captcha" maxlength="6">
                                 <template slot="prepend">
                                    <div class="fa fa-fw fa-2x fa-shield"></div>
                                 </template>
                                 <div slot="append" @click="changeCaptcha()">
                                    <img style="width: fit-content; height: 100%;" :src="captchaUrl" />
                                 </div>
                              </el-input>
                           </el-form-item>
                           <div style="width: 100%; padding-bottom: 15px;margin: 0 auto;text-align: center;">
                              <el-button type="primary" @click="login">登 陆</el-button>
                           </div>
                           <el-row justify="center" :gutter="3">
                              <el-col :xs="12" :sm="12" :md="12">
                                 <el-checkbox v-model="loginForm.rememberMe" style="float:left">
                                    <span style="color: var(--i-orange)">记住我</span>
                                 </el-checkbox>
                              </el-col>
                              <el-col :xs="12" :sm="12" :md="12">
                                 <el-link @click="toSetPwd" target="_blank" style="float:right">
                                    <span style="color: var(--i-orange)">忘记密码</span>
                                 </el-link>
                              </el-col>
                           </el-row>
                        </el-form>
                     </div>
                  </el-tab-pane>
                  <el-tab-pane label="用户注册" name="register">
                     <div style="background-color: #262c38; padding: 20px">
                        <el-form :model="registerForm" :rules="registerFormRules" ref="registerForm"
                           hide-required-asterisk>
                           <el-form-item prop="username">
                              <el-input placeholder="请输入名称" v-model="registerForm.username" maxlength="20">
                                 <template slot="prepend">
                                    <div class="fa fa-fw fa-2x fa-user-o"></div>
                                 </template>
                              </el-input>
                           </el-form-item>
                           <el-form-item prop="pwd1">
                              <el-input placeholder="请输入6-20位密码" v-model="registerForm.pwd1" type="password"
                                 show-password maxlength="20">
                                 <template slot="prepend">
                                    <div class="fa fa-fw fa-2x fa-lock"></div>
                                 </template>
                              </el-input>
                           </el-form-item>
                           <el-form-item prop="pwd2">
                              <el-input placeholder="请再次输入密码" v-model="registerForm.pwd2" type="password" show-password
                                 maxlength="20">
                                 <template slot="prepend">
                                    <div class="fa fa-fw fa-2x fa-lock"></div>
                                 </template>
                              </el-input>
                           </el-form-item>
                           <el-form-item prop="captcha">
                              <el-input placeholder="请输入图片验证码" v-model="registerForm.captcha" maxlength="6">
                                 <template slot="prepend">
                                    <div class="fa fa-fw fa-2x fa-shield"></div>
                                 </template>
                                 <div slot="append" @click="changeCaptcha()" class="padding-0">
                                    <img style="width: fit-content; height: 100%;" :src="captchaUrl" />
                                 </div>
                              </el-input>
                           </el-form-item>
                           <el-form-item prop="email">
                              <el-input placeholder="请输入邮箱" v-model="registerForm.email" maxlength="40">
                                 <template slot="prepend">
                                    <div class="fa fa-fw fa-2x fa-envelope-o"></div>
                                 </template>
                              </el-input>
                           </el-form-item>
                           <div style="width: 100%; padding-bottom: 15px;margin: 0 auto;text-align: center;">
                              <el-button type="primary" @click="register">注 册</el-button>
                           </div>
                        </el-form>
                     </div>
                  </el-tab-pane>
               </el-tabs>
            </template>
         </el-col>
      </el-row>
   </div>

   <script type="text/javascript" src="/static/etc/js/page/base/sign.js"></script>

</body>

</html>